<template>
  <div class="row">
    <div class="col-md-12">
      <Table
        v-show="!isSideVisible"
        title="桥梁分幅管理"
        :pageData="pageData"
        searchHint="输入桥梁名称,进行查询"
        @search="handleSearch">
        <!--索引列-->
        <el-table-column type="index" align="center" width="80px"></el-table-column>
        <!--表格主体内容-->
        <el-table-column v-for="col of columns"
                         align="center"
                         :key="col.prop"
                         :prop="col.prop"
                         :label="col.label"
                         :width="col.width"
                         :sortable="col.sortable">
        </el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="分幅统计" align="center" width="100px">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.sideCount>0?'primary':'danger'"
              close-transition>
              {{scope.row.sideCount==1?'单':scope.row.sideCount}}幅
            </el-tag>
          </template>
        </el-table-column>
        <!--操作列-->
        <el-table-column v-if="canManage" label="操作" align="center" width="70px">
          <template slot-scope="scope">
            <el-button v-if="canManage" size="mini" type="warning" @click="handleSideManage(scope.row)">管理</el-button>
          </template>
        </el-table-column>
      </Table>

      <!--分幅管理界面-->
      <SideManagement
        v-if="isSideVisible"
        :currentBridge="currentBridge"
        :sideTypeList="sideTypeList"
        :accessLinearList="accessLinearList"
        @onSideBack="handleSideBack">
      </SideManagement>
    </div>
  </div>
</template>

<script>
  import Table from "../bridge/Table.vue"
  import {doGet} from "../../../assets/js/utils/RequestUtils"
  import {COMPLETE, LOADING} from "../../../store/mutationTypes"
  import {hasAuthorizedFunction} from "../../../assets/js/global"
  import {MANAGE} from "../../../assets/js/enum/FunctionType"
  import SideManagement from "../../template/SideManagement.vue"

  const DATA_URL = "/bridge/bridgeSide/getBridgeList",
    SIDE_TYPE_URL = "/bridge/bridgeSide/getSideTypeList",
    ACCESS_LINEAR_URL = "/bridge/bridgeSide/getAccessLinearList";

  export default {
    name:"BridgeManagement",
    data() {
      return {
        currentBridge:{},
        pageData: {
          data:[],
          pageSize:10,
          total:0,
          currentPage:1,
        },
        columns: [
          {prop:"name", label:"桥名", width:"200"},
          {prop:"roadName", label:"路线号", sortable:"custom", width:"150"},
          {prop:"bridgeCategoryName", label:"桥梁分类", width:"150"},
          {prop:"fullAddressName", label:"所在地"},
          {prop:"unitsName", label:"管养单位"}
        ],
        //根据搜索框输入的内容自动分割
        searchValues: "",
        sortProp:"",
        order:"",
        filter:{prop:"", values:[]},
        sideTypeList:[],
        accessLinearList:[],
        isSideVisible:false
      }
    },
    computed: {
      canManage() {
        return true;
        // return hasAuthorizedFunction(this, MANAGE);
      }
    },
    methods: {
      handleSizeChange(pageSize) {
        this.pageData.pageSize = pageSize;
        this.fetchData();
      },
      handlePageTurning(index) {
        this.pageData.currentPage = index;
        this.fetchData();
      },
      handleSearch(value) {
        this.searchValues = value;
        this.fetchData();
      },
      handleSortChange({column, prop, order}) {
        this.sortProp = prop;
        this.order = order;
        this.fetchData();
      },
      handleFilterChange(filter) {
        this.filter = filter;
        this.fetchData();
      },
      handleSideManage(data) {
        this.currentBridge = data;
        this.isSideVisible = true;
      },
      handleSideBack() {
        this.isSideVisible = false;
        this.currentBridge = {};
        this.fetchData();
      },
      fetchData() {
        this.$store.commit(LOADING);
        doGet(DATA_URL, {
          data: {
            pageSize: this.pageData.pageSize,
            currentPage: this.pageData.currentPage,
            bridgeName: this.searchValues,
            sortProp: this.sortProp,
            order: this.order
          },
          component: this
        })
          .then(response => this.pageData = response)
          .finally(() => this.$store.commit(COMPLETE))
      },
      fetchSideSelectData() {
        doGet(SIDE_TYPE_URL, {component:this}).then(response=>this.sideTypeList = response);
        doGet(ACCESS_LINEAR_URL, {component:this}).then(response=>this.accessLinearList = response);
      },
    },
    activated() {
      this.fetchData();
      this.fetchSideSelectData();
    },
    components:{Table, SideManagement}
  }
</script>



// WEBPACK FOOTER //
// BridgeSideManagement.vue?ecf075fa
